<template>
  <div class="business-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	   <f-navbar title="商家页面" fontColor="#000" bgColor="#fff" :scrollTop="scrollTop" navbarType='5'></f-navbar>
	   <div style="padding:0 32rpx">
		   <div class="business-top" :style="{'margin-top':systemInfo.navBarH+'px'}">
			   <div class="logo">
				   <image :src="info.storeLogo" style="width:110rpx;height:110rpx" mode="scaleToFill"/>
			   </div>
			   <div class="info">
				   <div class="b-font">{{info.storeName}}</div>
				   <div class="s-font">
					   <img src="https://pic.moresu.com/Fhf6_4NIy9aj6gfwvnmFNjT-pa51" style="width: 124rpx;height: 39rpx;"/>
				   </div>
			   </div>
			   <div class="gz-div">
				   <u-button text="已关注" type="primary" shape="circle" size="small" color="#FF5E01" :customStyle="{width:'110rpx',height:'44rpx',margin:'0 auto'}" v-if="info.logId" @click="delAttention"></u-button>
				   <u-button text="+关注" type="primary" shape="circle" size="small" color="#FF5E01" :plain="true" :customStyle="{width:'110rpx',height:'44rpx',margin:'0 auto'}" v-else @click="attention"></u-button>
				   <div class="sub-text">{{info.followNum}}人关注</div>
			   </div>
		   </div>
	   </div>
	   <div class="business-nav">
		   <div class="nav-item" @click="toNewPage('/pagesUser/business/businessPage?storeId='+storeId)">
		   			   首页
		   			   <div class="bg-item"></div>
		   </div>
		   <div class="nav-item" @click="toNewPage('/pagesUser/business/businessAbout?storeId='+storeId)">
		   			   关于我们
		   			   <div class="bg-item"></div>
		   </div>
		   <div class="nav-item active">
		   			   产品
		   			   <div class="bg-item"></div>
		   </div>
		   <div class="nav-item" @click="toNewPage('/pagesUser/business/businessContact?storeId='+storeId)">
		   			   联系方式
		   			   <div class="bg-item"></div>
		   </div>
	   </div>
	   
	   <div class="block">
		   <div style="padding:24rpx 0">
				<u-search placeholder="输入牌号/品名/厂家等关键词" v-model="keywords" :showAction="false"  @search="searchList"></u-search>
		   </div>
		   <div class="sort-div" >
		   	<div class="sort-item" :class="{'active':salesSort == '' && priceSort == ''}"
		   	@click="priceSort='';salesSort='';clearData();getList();">
		   		<div style="margin-right:10rpx">综合排序</div>
		   		<u-icon name="arrow-down-fill" size="10" top="2" :color="salesSort == '' && priceSort == '' ? '#FF5E01' : '#B8B8B8'"></u-icon>
		   	</div>
		   	<div class="sort-item" :class="{'active':salesSort}"
		   	@click="salesSort = salesSort != 1 ? 1 : 2;clearData();getList();">
		   		<div style="margin-right:10rpx">销量</div>
		   		<div class="icon-div">
		   			<u-icon name="arrow-up-fill" size="10" :color="salesSort == 2 ? '#FF5E01' : '#B8B8B8'" top="3"></u-icon>
		   			<u-icon name="arrow-down-fill" size="10" :color="salesSort == 1 ? '#FF5E01' : '#B8B8B8'" bottom="3"></u-icon>
		   		</div>
		   	</div>
		   	<div class="sort-item" :class="{'active':priceSort}"
		   	@click="priceSort = priceSort != 1 ? 1 : 2;clearData();getList();">
		   		<div style="margin-right:10rpx">价格</div>
		   		<div class="icon-div">
		   			<u-icon name="arrow-up-fill" size="10" :color="priceSort == 2 ? '#FF5E01' : '#B8B8B8'" top="3"></u-icon>
		   			<u-icon name="arrow-down-fill" size="10" :color="priceSort == 1 ? '#FF5E01' : '#B8B8B8'" bottom="3"></u-icon>
		   		</div>
		   	</div>
		   </div>
		   <u-tabs :list="categoryList" keyName="parentCategoryName" @click="changeparentCategory" :activeStyle="{color: '#FF5902' ,'font-size': '22rpx'}" :inactiveStyle="{color: '#8B8B8B' ,'font-size': '22rpx'}"></u-tabs>
		   <div class="goods-list con-list-div">
			   <div class="goods-item" v-for="item in list" :key="item.goodsId">
				   <div class="goods-top">
					   <div class="goods-name">{{item.goodsName}}</div>
					   <div class="goods-price"  v-if="item.price != '电议'">
					   {{item.price}}<span style="font-size:20rpx;font-weight: normal;padding-left:10rpx">元/吨</span>
					   </div>
					   <div class="goods-price"  v-else>
					   	询价
					   </div>
				   </div>
				   <div class="goods-attar">
					   <span>库存数量：{{item.unit}}</span>
					   <span style="padding-left:20rpx">所在地区：{{item.area}}</span>
				   </div>
				   <div class="goods-bottom">
					   <div class="goods-time">
						   <img src="https://pic.moresu.com/FvRHG8lTvR-fQsAY7hMspuG2Th-4" style="width:21rpx;height:21rpx;margin-right:10rpx;"/>
						  {{item.createdAt}}
					   </div>
					   <!-- <u-button text="立即下单" shape="circle"  type="primary" size="small" color="#FF5E01" @click.native.stop="toAddOrder(item)" :customStyle="{width:'280rpx'}" v-if="item.price != '电议'"></u-button>
						<u-button text="我要询价" shape="circle"  type="primary" size="small" color="#FF5E01" @click.native.stop="toaddInquiry(item)" :customStyle="{width:'280rpx'}" v-else></u-button> -->
				   </div>
			   </div> 
		   </div>
		   
		   <div style="padding-bottom:40rpx;">
		      <u-loadmore :status="status" ></u-loadmore>
		   </div>
		   
	   </div>

  </div>
</template>

<script>
  import {
    storeDetail,
    mainBusiness,
    setMyAttention,
    delMyAttention,
  } from '@/config/api2.js'
   import {pcGoodsList,goodsSearchByCate,pageSeo} from '@/config/api.js'
  import fNavbar from '@/components/module/f-navbar/f-navbar';
  export default {
	  components: {
	    fNavbar
	  },
    data() {
   
      return {
        storeId: 0,
        info: {},
		systemInfo:{
		    statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
		    // #ifdef MP-ALIPAY
		    navBarH: uni.getSystemInfoSync().statusBarHeight + uni.getSystemInfoSync().titleBarHeight, //菜单栏总高度--单位px
		    titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px
		    // #endif
		    // #ifndef MP-ALIPAY
		    navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px
		    titleBarHeight: 44, //标题栏高度--单位px
		    // #endif
		},
		scrollTop:0,
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		keywords: "", //关键词搜索
		parentCategoryId:'',
		salesSort: '',//销量排序(1降序，2升序)
		priceSort: '',////价排序(1降序，2升序)
		count:0,
		categoryList:[]
      }
    },
    onLoad(e) {
      this.storeId = e.storeId
      this.getStoreDetail()
	  this.keywords = ''; 
	  this.salesSort = '';//销量排序(1降序，2升序)
	  this.priceSort = '';//价排序(1降序，2升序)
	  this.parentCategoryId = '';
	  this.categoryList = [];
	  this.clearData();
	  this.getList();
	  this.getInquiryCategoryList()
	  // #ifdef H5
	  pageSeo({pageType: 'storeDetailPage',id:this.storeId}).then((res)=>{
	  	document.title = res.pageTitle;
	  })
	  // #endif
    },
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
    methods: {
		toaddInquiry(item){
			getApp().globalData.goodsId = item.goodsId;
			uni.switchTab({
			  url: '/pages/public/addInquiry'
			});
		},
		changeparentCategory(item){
			this.parentCategoryId = item.parentCategoryId
			this.searchList()
		},
		getInquiryCategoryList() {
		   goodsSearchByCate({storeId: this.storeId}).then((res) => {
			this.categoryList = res
			this.categoryList.unshift({parentCategoryId:'',parentCategoryName:'全部'})
		  })
		},

		searchList(){
			this.clearData();
			this.getList()
		},
		
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.count = 0;
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			data.keywords = this.keywords;
			data.parentCategoryId = this.parentCategoryId;
			this.status = 'loading';
			data.salesSort = this.salesSort;
			data.priceSort = this.priceSort;
			data.storeId = this.storeId
			data.goodsShow = 1
		    return	pcGoodsList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		
		toNewPage(url){
			uni.redirectTo({
			  url: url
			})
		},
		toNewPage2(url){
			uni.navigateTo({
			  url: url
			})
		},
		toAddOrder(item){
			this.judgeLogin(() => {
				 uni.navigateTo({
				   url: '/pagesUser/order/addOrder?goodsId='+item.goodsId
				 })
			})
		},
			
		
		
      getStoreDetail() {
        storeDetail({
          storeId: this.storeId
        }).then(res => {
          this.info = res;
		
        })

      },
      attention() {
        setMyAttention({
          collectType: 'store',
          storeId: this.storeId
        }).then(res => {
          uni.showToast({
            title: '关注成功',
            duration: 1000,
            icon: 'none'
          })
          this.getStoreDetail()
        })
      },
      delAttention() {
        uni.showModal({
          content: '是否取消关注？',
          success: (res) => {
            if (res.confirm) {
              delMyAttention({
                logid: this.info.logId
              }).then(() => {
                uni.showToast({
                  title: '已取消',
                  duration: 1000,
                  icon: 'none'
                })
                this.getStoreDetail()
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      
	  
      
     
	 
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/common.scss';
  .business-page{
	  padding:32rpx 0;
	  background: url("https://pic.moresu.com/FimZoT7JzrL-cxdUzhRE7cAJxAW5") no-repeat #fff;
	  background-size: contain;
	  min-height: 100vh;
	  .business-top{
		  background: rgba(255,255,255,1);
		  border-radius: 18rpx;
		  padding:24rpx;
		  @include flexbox(flex-start,center);
		  .logo{
			  width: 110rpx;
			  height: 110rpx;
			  background: rgba(255,255,255,1);
			  border: 1rpx solid #B8B8B8;
			  opacity: 1;
			  border-radius: 30rpx;
			  overflow: hidden;
		  }
		  .info{
			  flex:1;
			  padding:0 20rpx;
			  .b-font{
				  font-size: 28rpx;
				  font-weight: bold;
				  color: #070D14;
			  }
			  .s-font{
				  margin-top:10rpx;
				  font-size: 20rpx;
				  color: #929292;
				  .label{
					  background: rgba(52,120,255,1);
					  border-radius: 5px;
					  color:#fff;
					  padding:0 8rpx
				  }
			  }
		  }
		  .gz-div{
			  text-align: center;
			  .sub-text{
				  font-size: 20rpx;
				  margin-top:10rpx;
				  color: #A5A5A5;
			  }
		  }
		  
	  }
      .business-nav{
		  margin-top:40rpx;
		  height: 159rpx;
		  background: linear-gradient(180deg, #FFAD65 0%, #FF3400 100%);
		  border-radius: 18rpx;
		  @include flexbox(space-around,flex-start);
		  padding-top:20rpx;
		  .nav-item{
			  font-size: 28rpx;
			  line-height: 38rpx;
			  color: #FFFFFF;
			  width:25%;
			  text-align: center;
		  }
		   .nav-item .bg-item{
			   display:none;
		   }
		  .nav-item.active{
			  font-weight: bold;
			  color: #FF5D00;
			  font-size:30rpx;
		  }
		  .nav-item.active .bg-item{
			  display: block;
			  background: linear-gradient(180deg, #FFE2D1 0%, #FFFFFF 100%);
			  height:110rpx;
			  margin-top: -70rpx;
			  border-top-left-radius: 18rpx;
			  border-top-right-radius: 18rpx;
		  }
	  }
	  .block{
		  background: #fff;
		  border-radius: 18rpx;
		  padding:24rpx 32rpx;
		  margin-top:-80rpx;
		  .block-title{
			  font-size: 28rpx;
			  font-weight: bold;
			  color: #000000;
			  @include flexbox(flex-start,center);
		  }
		  .sort-div{
		  	@include flexbox(space-between,center);
		  	.sort-item{
		  		width:170rpx;
		  		height: 60rpx;
		  		background: rgba(246,246,246,1);
		  		border-radius: 35rpx;
		  		font-size: 24rpx;
		  		text-align: center;
		  		@include flexbox(center,center);
		  		flex:none;
		  		.icon-div{
		  			position: relative;
		  		}
		  	}
		  	.sort-item.active{
		  		color:#FF5E01
		  	}
		  	.sort-item.fifter-item{
		  		background: none;
		  		@include flexbox(flex-start,center);
		  		width:100rpx;
		  		flex:none
		  	}
		  	
		  }
		  .goods-list{
			  margin-top:40rpx;
			  .goods-item{
				  border: 1px solid #B8B8B8;
				  border-radius: 15rpx;
				  padding:0 24rpx;
				  margin-bottom:24rpx;
				  .goods-top{
					  @include flexbox(space-between,center);
					  font-size: 30rpx;
					  color: #070D14;
					  padding:24rpx 0;
					  .goods-name{
						  padding-right:40rpx;
						  @include textoverflow(1)
					  }
					  .goods-price{
							color: #FF0000;
							font-weight: bold;
					  }
				  }
				  .goods-attar{
					  font-size: 24rpx;
					  color: #B8B8B8;
					  padding-bottom:24rpx;
					  border-bottom:1px solid #DEDEDE;
				  }
				  .goods-bottom{
				    @include flexbox(space-between,center);
					font-size: 20rpx;
					color: #929292;
					padding:24rpx 0;
					.goods-time{
						@include flexbox(flex-start,center);
					}
				  }
			  }
		  }
	  }
	  .business-base{
		  background: rgba(254,249,246,1);
		  background-size: cover;
		  border-radius: 18rpx;
		  padding:24rpx;
		  margin:24rpx 0;
		 font-size: 24rpx;
		 line-height: 50rpx;
		 color: #000;
		 .btn-span{
			 border-radius: 25rpx;
			 border:1rpx solid #fff;
			 padding:0 20rpx; 
		 }
	  }
	  .business-base.contact{
		   background: url('https://pic.moresu.com/Fg3isLojmtJXgE3IW8lEZnAfAXxx');
		   background-size: cover;
		 
	  }
	  
	  
      .xc-div.block{
		   margin-top:32rpx;
		   .xc-item{
			   padding-top:64rpx;
			   .xc-text{
				   text-align: center;
				   font-size: 24rpx;
				   color: #000000;
				   margin-top:20rpx;
				   font-weight: bold;
			   }
		   }
	  }
  }
</style>